import { Box, Flex, Heading, VStack, useBreakpointValue } from '@chakra-ui/react';
import React, { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../redux/hooks';
import { resetTimer } from '../../redux/timer/timerSlice';
import AnswersOnQuestions from '../ui/AnswersOnQuestion';
import Timer from '../ui/Timer';
import UsersAndScores from '../ui/UsersAndScores';

export default function GamePage(): JSX.Element {
  const dispatch = useAppDispatch();
  const game = useAppSelector((store) => store.game);
  const activeThemeId = game.themeId;
  const themes = useAppSelector((state) => state.themes.themes);
  const activeTheme = themes.find((theme) => theme.id === activeThemeId);

  const isMobile = useBreakpointValue({ base: true, lg: false });

  useEffect(() => {
    dispatch(resetTimer());
  }, [dispatch]);

  return (
    <Box
      height="100vh"
      width="100vw"
      bgImage="url('/img/3.png')"
      bgPosition="center"
      bgRepeat="no-repeat"
      bgSize="cover"
      fontSize={30}
    >
      {activeTheme && (
        <Flex
          direction="column"
          align="center"
          justify="center"
          height="100vh"
          paddingX="5vw"
          fontSize={35}
        >
          {/* Всегда показываем Timer первым на мобильных устройствах */}
          {isMobile && (
            <Box display={isMobile ? 'flex' : 'none'} width="100%" mb={4}>
              <Timer />
            </Box>
          )}

          <Flex
            direction={isMobile ? 'column' : 'row'}
            width="100%"
            align="center"
            justify={isMobile ? 'center' : 'flex-start'}
          >
            {/* Timer для десктопной версии слева */}
            {!isMobile && (
              <Box mr={5}>
                <Timer />
              </Box>
            )}

            <VStack flex="1" textAlign="center" spacing={8}>
              <Heading
                color="yellow.400"
                mb={isMobile ? 1 : 8} // Устанавливаем mb равным 1 на мобильной версии
                size={isMobile ? '3xl' : '4xl'} // Уменьшаем размер для мобильной версии
                textAlign="center"
                style={{
                  textShadow: '1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000',
                }}
              >
                {activeTheme.title}
              </Heading>
              <AnswersOnQuestions />
            </VStack>

            {!isMobile && (
              <Box mt={135}>
                <UsersAndScores />
              </Box>
            )}
          </Flex>
        </Flex>
      )}
    </Box>
  );
}
